<template>
  <div class="main-box">
    <el-row>
      <!-- 头像 -->
      <el-col :span="8">
        <div class="sec-user-avatar">
          <div class="sec-avatar-box">
            <img src="@/assets/bg/bg.jpg">
          </div>
          <div class="sec-user-desc">
            <div>zhangsan</div>
            <div>菜鸟保安，加油~，努力~</div>
            <div>
              <el-tag
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
              >
                {{tag.name}}
              </el-tag>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 用户信息 -->
      <el-col :span="16">
        <el-descriptions
          v-for="(userKey, userValue, index) in users"
          :key="index"
        >
          <el-descriptions-item
            :label="userValue"
            label-class-name="sec-user-label"
            content-class-name="sec-user-content"
          >
          <el-tag v-if="userValue == '实名认证'">{{ userKey }}</el-tag>
          <span v-else>{{ userKey }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      users: {
        用户名: "zhangsan",
        年龄: 18,
        性别: "男",
        生日: "2022-10-11",
        部门: "暂无",
        职位: "保安",
        实名认证: "未实名认证",
        等级: "菜鸟保安",
      },
      tags: [
        { name: "游戏党", type: "" },
        { name: "旅游", type: "success" },
        { name: "历史", type: "info" },
        { name: "熬夜", type: "warning" }
      ],
    };
  },
};
</script>

<style lang="css" scoped>
.el-main {
  margin-top: 30px;
}
.main-box {
  height: 100%;
}
.sec-user-avatar {
  width: 300px;
  height: 100%;
}
.sec-avatar-box {
  height: 200px;
  width: 200px;
  margin: auto;
  border: 1px solid #eee;
  border-radius: 50%;
  text-align: center;
}
.sec-avatar-box > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.sec-user-desc {
  height: 200px;
  width: 100%;
  text-align: center;
  margin: auto;
}
.sec-user-label {
  color: black;
  font-size: 16px;
  font-weight: 700;
}
</style>